<template>
  <div class="item">
    <!-- 标题 -->
    <el-row class="title-border" v-if="showHeader">
      <el-col :span="2">
        <div class="grid-content bg-white"></div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-white">
          <div class="font-color-dark center title">输入</div>
          <div class="font-color-light center content">原料 / 耗材 / 能源 / 资源</div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-dark">
          <div class="product-png"></div>
          <center-node :name="pathConfig.name"/>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-white">
          <div class="font-color-dark center title">输出</div>
          <div class="font-color-light center content">废料 / 废气 / 废水</div>
        </div>
      </el-col>

    </el-row>

    <!-- 内容 -->
    <PathThinkItem
      :sideName="nameList[0]"
      :centerAddFormModel="addFormModel"
      :centerAddConfig="addCenterConfig"
      ref="path0"
      :rightAddFormModel="addFormModel"
      :rightAddConfig="addRightConfig"
      :leftAddFormModel="addFormModel"
      :leftAddConfig="addLeftConfig"
      :leftNodeList="leftNodeLists[0]"
      :centerNodeList="centerNodeLists[0]"
      :rightNodeList="rightNodeLists[0]"
      @add="addItem"
      @turn="turn(0)"
    />
    <PathThinkItem
      :sideName="nameList[1]"
      :centerAddFormModel="addFormModel"
      :centerAddConfig="addCenterConfig"
      ref="path1"
      :rightAddFormModel="addFormModel"
      :rightAddConfig="addRightConfig"
      :leftAddFormModel="addFormModel"
      :leftAddConfig="addLeftConfig"
      :leftNodeList="leftNodeLists[1]"
      :centerNodeList="centerNodeLists[1]"
      :rightNodeList="rightNodeLists[1]"
      @add="addItem"
      @turn="turn(1)"
    />
    <PathThinkItem
      :sideName="nameList[2]"
      :centerAddFormModel="addFormModel"
      :centerAddConfig="addCenterConfig"
      ref="path2"
      :rightAddFormModel="addFormModel"
      :rightAddConfig="addRightConfig"
      :leftAddFormModel="addFormModel"
      :leftAddConfig="addLeftConfig"
      :leftNodeList="leftNodeLists[2]"
      :centerNodeList="centerNodeLists[2]"
      :rightNodeList="rightNodeLists[2]"
      @add="addItem"
      @turn="turn(2)"
    />
    <PathThinkItem
      v-if="pathConfig.type == 1"
      :sideName="nameList[3]"
      :centerAddFormModel="addFormModel"
      :centerAddConfig="addCenterConfig"
      ref="path3"
      :rightAddFormModel="addFormModel"
      :rightAddConfig="addRightConfig"
      :leftAddFormModel="addFormModel"
      :leftAddConfig="addLeftConfig"
      :leftNodeList="leftNodeLists[3]"
      :centerNodeList="centerNodeLists[3]"
      :rightNodeList="rightNodeLists[3]"
      @add="addItem"
      @turn="turn(3)"
    />
    <PathThinkItem
      v-if="pathConfig.type == 1"
      :sideName="nameList[4]"
      :centerAddFormModel="addFormModel"
      :centerAddConfig="addCenterConfig"
      ref="path4"
      :rightAddFormModel="addFormModel"
      :rightAddConfig="addRightConfig"
      :leftAddFormModel="addFormModel"
      :leftAddConfig="addLeftConfig"
      :leftNodeList="leftNodeLists[4]"
      :centerNodeList="centerNodeLists[4]"
      :rightNodeList="rightNodeLists[4]"
      @add="addItem"
      @turn="turn(4)"
    />
    <!-- <EmissionLab @move="dealItemEnter"/> -->
  </div>
</template>

<script>
import CenterNode from "./CenterNode"
import EmissionLab from "./EmissionLab"
import PathThinkItem from "./PathThinkItem2"

export default {
  props: {
    leftNodeLists: {
      type: Array,
      default: function () {
        return []
      }
    },
    centerNodeLists: {
      type: Array,
      default: function () {
        return []
      }
    },
    rightNodeLists: {
      type: Array,
      default: function () {
        return []
      }
    },
    pathConfig: {
      type: Object,
      default: function () {
        return {
          id: '',
          name: '轧钢板材',
          type: 0
        }
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    itemList: Array,

    centerAddFormModel: Object,
    centerAddConfig: Array,
    centerPlus: Object,

    sideAddFormModel: Object,
    sideAddConfig: Array,
    sidePlus: Object,
  },
  components: {
    PathThinkItem,
    CenterNode,
    EmissionLab
  },
  data() {
    return {
      leftScope: {
        start: 100,
        end: 400
      },
      rightScope: {
        start: 780,
        end: 1100
      },
      totalHeight: [],
      nameList: [
        "原材料获取",
        "生产制造",
        "分销",
        "使用",
        "废弃",
      ],
      addCenterConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '工序名称',
          edit: true,
          props: {
            placeholder: '工序名称',
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'name2',
          name: '工序主产物名称',
          edit: true,
          props: {
            placeholder: '工序主产物名称',
          }
        },
        {
          id: '3',
          type: 'input',
          model: 'name3',
          name: '工序副产物名称',
          edit: true,
          props: {
            placeholder: '工序副产物名称',
          }
        },

      ],
      addLeftConfig: [
        {
          id: '8',
          type: 'input',
          model: 'name',
          name: '排放源名称',
          edit: true,
          props: {
            placeholder: '排放源名称',
          }
        },
        {
          id: '10',
          type: 'select',
          model: 'type',
          name: '排放类型',
          edit: true,
          props: {
            placeholder: '排放类型',
            options: [
              {value: '原材料/物料', label: '原材料/物料'},
              {value: '耗材', label: '耗材'},
              {value: '能源', label: '能源'},
              {value: '资源', label: '资源'},
              {value: '运输/通勤', label: '运输/通勤'},
              {value: '固碳', label: '固碳'},
              {value: '再生原料', label: '再生原料'},
              {value: '包装材料', label: '包装材料'},
            ]
          }
        },
        {
          id: '9',
          type: 'input',
          model: 'note',
          name: '排放源说明',
          edit: true,
          props: {
            placeholder: '排放源说明',
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'emissionsUnitN',
          name: '排放单位分子',
          edit: true,
          props: {
            placeholder: '排放单位分子',
            options: [
              {value: "tCO2-eq", label: "tCO2-eq"},
              {value: "kgCO2-eq", label: "kgCO2-eq"},
            ]
          }
        },
        {
          id: '2',
          type: 'select',
          model: 'emissionsUnitD',
          name: '排放单位分母',
          edit: true,
          props: {
            placeholder: '排放单位分母',
            options: [
              {value: "t", label: "t"},
              {value: "kg", label: "kg"},
              {value: "t·km", label: "t·km"},
              {value: "kwh", label: "kwh"}
            ]
          }
        },
        {
          id: '7',
          type: 'select',
          model: 'ioType',
          name: '匹配类型',
          edit: true,
          props: {
            placeholder: '匹配类型',
            options: [
              {value: '排放因子', label: '排放因子'},
              {value: '检测值', label: '检测值'}
            ]
          }
        },
        {
          id: '4',
          type: 'input',
          model: 'factor',
          name: '因子名',
          edit: true,
          props: {
            placeholder: '因子名',
          }
        },
        {
          id: '5',
          type: 'input',
          model: 'factorEmissions',
          name: '排放因子值',
          edit: true,
          props: {
            placeholder: '排放因子值',
          }
        },
        {
          id: '1',
          type: 'input',
          model: 'dataSource',
          name: '数据来源',
          edit: true,
          props: {
            placeholder: '数据来源',
          }
        },
      ],
      addRightConfig: [
        {
          id: '8',
          type: 'input',
          model: 'name',
          name: '排放源名称',
          edit: true,
          props: {
            placeholder: '排放源名称',
          }
        },
        {
          id: '1',
          type: 'input',
          model: 'dataSource',
          name: '数据来源',
          edit: true,
          props: {
            placeholder: '数据来源',
          }
        },
        {
          id: '2',
          type: 'select',
          model: 'emissionsUnitD',
          name: '排放单位分母',
          edit: true,
          props: {
            placeholder: '排放单位分母',
            options: [
              {value: "t", label: "t"},
              {value: "kg", label: "kg"},
              {value: "t·km", label: "t·km"},
              {value: "kwh", label: "kwh"}
            ]
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'emissionsUnitN',
          name: '排放单位分子',
          edit: true,
          props: {
            placeholder: '排放单位分子',
            options: [
              {value: "tCO2-eq", label: "tCO2-eq"},
              {value: "kgCO2-eq", label: "kgCO2-eq"},
            ]
          }
        },
        {
          id: '4',
          type: 'input',
          model: 'factor',
          name: '因子名',
          edit: true,
          props: {
            placeholder: '因子名',
          }
        },
        {
          id: '5',
          type: 'input',
          model: 'factorEmissions',
          name: '排放因子值',
          edit: true,
          props: {
            placeholder: '排放因子值',
          }
        },
        {
          id: '7',
          type: 'select',
          model: 'matchType',
          name: '匹配类型',
          edit: true,
          props: {
            placeholder: '匹配类型',
            options: [
              {value: '排放因子', label: '排放因子'},
              {value: '检测值', label: '检测值'}
            ]
          }
        },

        {
          id: '9',
          type: 'input',
          model: 'note',
          name: '排放源说明',
          edit: true,
          props: {
            placeholder: '排放源说明',
          }
        },
        {
          id: '10',
          type: 'select',
          model: 'type',
          name: '类型',
          edit: true,
          props: {
            placeholder: '类型',
            options: [
              {value: '废气', label: '废气'},
              {value: '废水', label: '废水'},
              {value: '固废', label: '固废'},
              {value: '可再生废料', label: '可再生废料'},
            ]
          }
        },
      ],
      addFormModel: {
        dataSource: "", //	数据来源
        emissionsUnitD: "", // 排放单位分母
        emissionsUnitN: "", // 排放单位分子
        factor: "", // 因子名
        factorEmissions: "", // 排放因子值
        matchType: "", // 匹配类型：排放因子-检测值
        name: "", //	排放源名称
        note: "", //	排放源说明
        num: "", //核算数量
        processId: "", //	工序id
        type: "", //	类型
      },
      plus: {},
      // leftNodeLists:[
      //   [
      //     [{name:"掘进机"},{name:"扫描仪"},{name:"运输车"},{name:"电力供应"}],
      //     [{name:"煤炭"},{name:"煤气和热能"},{name:"加工设备"}],
      //     [{name:"开采机"},{name:"钻探车"},{name:"运输车"},{name:"电力供应"},]
      //   ],
      //   [
      //     [{name:"生铁"},{name:"废钢"},{name:"石灰石"},{name:"焦炭"}],
      //     [{name:"废钢"},{name:"回收钢水"},{name:"钢锭"},{name:"锭坯"}],
      //     [{name:"煤"},{name:"焦炭"},{name:"炼铁用原料"},{name:"各种合金"}],
      //     [{name:"钢坯"},{name:"钢板"},{name:"热卷"}],
      //     [{name:"冷轧"},{name:"退火"},{name:"酸洗"},{name:"镀层"}]
      //   ],
      // ],
      // centerNodeLists:[
      //   [
      //     {name:"铁矿石采矿"},
      //     {name:"焦炭制备"},
      //     {name:"石灰石采矿"},
      //   ],
      //   [
      //     {name:"前处理"},
      //     {name:"炼钢"},
      //     {name:"炼铁"},
      //     {name:"热轧"},
      //     {name:"后处理"},
      //   ],
      // ],
      // rightNodeLists:[
      //   [
      //     [{name:"铁矿石矿石"},{name:"黄铜矿"},{name:"磁铁矿"},{name:"废渣和废水"},],
      //     [{name:"焦炭"},{name:"焦炉煤气"},{name:"炉渣"},{name:"煤焦油"},],
      //     [{name:"石灰石块矿"},{name:"石灰石废渣"},{name:"石灰石废水"}]
      //   ],
      //   [
      //     [{name:"炼钢用原料"},{name:"炼铁用原料"},{name:"铁水"},{name:"炉渣"}],
      //     [{name:"钢锭"},{name:"钢坯"},{name:"废气"},{name:"废渣"}],
      //     [{name:"铁水"},{name:"炉渣"},{name:"废气"},{name:"侧吹氧气"}],
      //     [{name:"热轧带钢"},{name:"热轧板"},{name:"热轧卷"},{name:"废料"}],
      //     [{name:"冷轧板"},{name:"冷轧卷"},{name:"酸洗板"},{name:"镀锌卷"}]
      //   ],
      // ]
    }
  },
  methods: {
    // 处理添加工序事件
    turn(type) {
      this.$router.push(
        {
          path: "/carbonFootprintVerification/carbonFootprintVerification/processManagement",
          query: {
            id: this.pathConfig.id,
            select: true,
            type: this.nameList[type]
          }
        })
    },
    dealItemEnter(position, name) {
      this.addNodeByPosition(position, name)
    },
    // 计算当前的元素高度集
    calcHeightList() {
      var li0 = this.$refs["path0"].refGetHeightList()
      var li1 = this.$refs["path1"].refGetHeightList()
      var li2 = this.$refs["path2"].refGetHeightList()
      var li3 = this.$refs["path3"].refGetHeightList()
      var li4 = this.$refs["path4"].refGetHeightList()
      var li = [li0, li1, li2, li3, li4]

      var tem_sum = 0
      this.totalHeight = []
      for (var i = 0; i < li.length; i++) {
        var tem_item = {
          min: "",
          max: "",
          itemList: []
        }
        tem_item.max = tem_sum
        for (var j = 0; j < li[i].length; j++) {
          var tt = {
            max: tem_sum,
            min: tem_sum + li[i][j]
          }
          // console.log(tt)
          tem_item.itemList.push(tt)
          tem_sum = tem_sum + li[i][j]
        }

        tem_item.min = tem_sum
        this.totalHeight.push(tem_item) // 添加到列表中
      }
      this.totalHeight.reverse()

    },
    // 根据坐标计算进行元素添加
    addNodeByPosition(position, name) {
      this.calcHeightList()
      var leftOrRight = 0
      var focusI = -1
      var focusJ = -1

      // 判断要添加到左侧或者右侧
      if ((this.leftScope.start <= position.left) && (position.left <= this.leftScope.end)) { // 添加到左侧
        leftOrRight = 1
      } else if ((this.rightScope.start <= position.left) && (position.left <= this.rightScope.end)) { // 添加到右侧
        leftOrRight = 2
      }
      // 判断添加到某一个具体的位置
      for (var i = 0; i < this.totalHeight.length; i++) {
        var find = false
        if ((this.totalHeight[i].min <= position.top) && (this.totalHeight[i].max >= position.top)) {
          for (var j = 0; j < this.totalHeight[i].itemList.length; j++) {
            if ((this.totalHeight[i].itemList[j].min <= position.top) && (this.totalHeight[i].itemList[j].max >= position.top)) {
              focusI = i
              focusJ = j
              find = true
              break
            }
          }
        }
        if (find) {
          break
        }
      }
      // this.test.focusI = focusI
      // this.test.focusJ = focusJ
      // this.test.leftOrRight = leftOrRight
      // 具体添加节点到界面中
      if (leftOrRight != 0 && this.focusI != -1 && this.focusJ != -1) {
        console.log("adding....")
        console.log("path" + focusI)
        if (leftOrRight == 1) { // 添加到左侧
          this.$refs["path" + focusI].refAddNode(focusJ, "left", name);
        } else { // 添加到右侧
          this.$refs["path" + focusI].refAddNode(focusJ, "right", name);
        }
      }

    },
    // 处理添加事件
    addItem(type, model) {
      if (type == "left") { // 添加左节点
        this.createProcessAndEmission(0, model)
      } else if (type == "right") { // 添加右节点
        this.createProcessAndEmission(1, model)
      }
    },

  }
}
</script>


<style scoped>
.product-png {
  position: absolute;
  left: 700px;
  top: 30px;
  width: 40px;
  height: 40px;
  z-index: 99;
  background-image: url('~@/assets/emission/steel.png');
  background-size: 100% 100%;
}

.grid-content {
  height: 100px;
  border: 1px solid #e5e5e5;
  padding-top: 20px;
}

.font-color-dark {
  color: #8c8c8c;
}

.font-color-light {
  color: #c3c3c3;
}

.title {
  font-size: 20px;
}

.content {
  font-size: 16px;
}

.center {
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
}

.title-border {
  border-bottom: 2px solid #e5e5e5;
}

.item {
  /*  */
  height: 3200px;
}
</style>
